iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
0
自我挑戰組

React 30 天學習歷程系列 第 3

【Day 3】React 中常用的一些 ES6 語法 (一)

  • 分享至 

  • xImage
  •  

ES6 中有不少新的語法在 React 中有應用到,因此在開始 React 的學習前,我會先整理一些 ES6 的語法或新觀念。由於之前的工作中就有使用 ES6 的經驗,所以這篇中我只會針對自己在 ES6 中比較不熟悉或不理解的觀念做整理,不會有全面性的介紹。由於這次學習過程中,發現自己對 ES6 還有很多不熟悉之處,因此 ES6 的部分我會拆成三天做整理。

es-module 模組化

以往的 JS 是沒有模組化的,後來有陸續提出 CommonJs、AMD、CMD 三大規範來實現,但都不是最好的方式,因此官方在 ES6 提出了 es-module 模組化方案,主要由 export(導出)、import(導入)兩個命令組成,在使用 es-module 時可以將每個 JS 檔當作一個模組,檔案內的變數、函式、類都需要 export 才能在另一個檔案裡用 import 來引用,下面會介紹一些運用方式。

普通導入導出

普通導出變數、導入的變數需要包覆大括號,變數名稱固定

//app1.js
export const count = 10

//app2.js
import { count } from './app1.js'

默認導入導出

會多使用 default 來導出,導入時候不需要包覆大括號,變數名不用固定

const count = 10
export default count

//app2.js
import number from './app1.js'//變數名稱可改變

同時使用普通和默認導入導出

export const Component = {} //導出一個物件
export default = {}

//app2.js
import React, { Component } from './app1.js'//React 是默認導出的 {},默認導出的變數可以自定義

複合寫法

export { foo, bar } from 'app.js'

//等同於
import { foo, bar } from 'app.js'
export { foo, bar}

使用 * as 整體導入

有時候我們可能會在一隻檔案中導出很多變數、函式

export function getPhone () {
    //...
    return phone
}
export function getMail () {
    //...
    return mail
}

正常導入的話如下

import { getPhone, getMail } from './app1.js'
console.log(getPhone)
console.log(getMail)

用 * as 導入則是將導出的所有東西放在一個 object 中,如下

import * as getData from './app1.js'
console.log(getData.getPhone)
console.log(getData.getMail)

注意事項

  1. 普通導出時可以導出 object、聲明表達式,但不能導出已聲明的變數或是無變數聲明的表達式
    無變數聲明:匿名函數 function () {}、class 等等
const count = 100

// 錯誤用法
export count
export 100
export function () {}
export class {}

//正確用法
export const count = 100
export function getPhone () {}
export class Menu {}
export { coubt } 

  1. 默認導出時,不能導出聲明表達式,class 例外,因為 export default 其實是導出一個叫做 default 的變數,所以它後面不能跟變數聲明語句。
//錯誤用法
export default const count = 100 

//正確用法
const count = 100
export default count
export default { count }
export default [ count ]
export default function getPhone () {}
export default class Menu {}
  1. import 導入的變量是唯讀的,不能改變它
import { a } from './app1.js'

a = {} //error, a is read-only
a.foo = 'hello' //傳參考,可以

展開運算子在 React 中的運用

最後補充一個 React 中展開運算子的使用方式,是我之前曾經看過,但當下沒意識到這是展開運算子的運用(真的是很不熟ˊ ˋ)。ES6 中所謂的展開運算子,是在物件或陣列中展開屬性的一種語法,遵循由右至左,相同屬性則覆蓋的原則。

const base = {name: 'leo', age:25}
const user = {job: 'frontent', ...base} //{job: "frontent", name: "leo", age: 25}

在 React 中可以像下面一樣運用

class UserComponent extends Component {
  render () {
    const user = {name: 'leo', age:25}
    return <div>
      <UserPage {...user} />
      <!--    等同於    -->
      <UserPage name="leo" age="25" />
    </div>
  }
}

小結

這一篇主要是整理 JS 模組化以及展開運算子的一些運用,這些語法雖然過去都曾經看過或使用過,然而當時並不是真的很清楚運作的方式,因此透過這次學習,再做進一步的了解並整理。下一篇將會整理 ES6 中 class、decorator 以及箭頭函式的運用方式。


上一篇
【Day 2】常見的 React 框架及安裝方式
下一篇
【Day 4】React 中常用的一些 ES6 語法 (二)
系列文
React 30 天學習歷程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言